<template>
	<div class="cust_card" v-if="data" @click="onJumpDetail">
		<div class="card_top">
			<div class="top_left">
				<VanImage
					class="card_avatar"
					:src="data.avatar"
					:error-icon="require('@IMG/icon_cust_avatar.png')"
					:loading-icon="require('@IMG/icon_cust_avatar.png')"
				/>
				<i
					class="card_certified"
					:class="data.certified ? 'has_certified' : 'un_certified'"
				>
					{{ data.certified ? '已认证' : '未认证' }}
				</i>
			</div>
			<div class="top_middle">
				<template v-if="data.certified">
					<div
						class="card_name"
						v-if="data.name"
						v-html="renderHighlight(data.name, highlightWord)"
					/>
					<div class="card_phone">
						<span
							v-if="data.ethnicGroup"
							>{{ data.ethnicGroup }}</span
						><span
							v-if="data.phone && data.isBelong === 1"
							v-html="renderHighlight(renderEncodePhone(data.phone, isEncode), highlightWord)"
						/>
					</div>
					<div class="card_bank">
						<span v-if="data.subBranch">{{ data.subBranch  }}</span>
						<span v-if="data.custManagerName && data.isBelong === 0"
							>管户经理 {{ data.custManagerName  }}</span
						>
					</div>
				</template>
				<template v-else>
					<div
						class="card_name"
						v-if="data.nickName"
						v-html="renderHighlight(data.nickName, highlightWord)"
					/>
					<div
						class="card_corp"
						v-if="['1', '2'].includes(data.type)"
						:class="{is_qw: data.type === '2'}"
					>
						{{ data.type === '1' ? '微信' : data.corpName }}
					</div>
				</template>
			</div>
			<div
				class="top_right"
				v-if="!data.certified"
				@click.stop="onJumpAuth"
			>
				去认证
			</div>
		</div>
		<template v-if="data.certified && data.isBelong">
			<div class="card_assets">
				<span class="assets_label">总资产</span>
				<template v-if="isEncode">
					<span class="assets_value">******</span>
				</template>
				<template v-else>
					<span
						class="assets_value"
						>{{ renderIntlNum(data.totalAsset) }}</span
					>
					<i class="assets_unit">元</i>
				</template>
			</div>
			<div class="card_todo">
				<div class="todo_item">
					<i>3</i>
					<span>定期到期</span>
				</div>
				<div class="todo_item">
					<i>1</i>
					<span>定期到期未承接</span>
				</div>
				<div class="todo_item">
					<i>2</i>
					<span>理财到期</span>
				</div>
				<div class="todo_item">
					<i>4</i>
					<span>理财到期未承接</span>
				</div>
			</div>
		</template>
	</div>
</template>

<script setup>
import { defineProps } from 'vue'
import { Image as VanImage } from 'vant'
import { renderIntlNum, renderHighlight } from '@/utils/render'

const props = defineProps({
	data: {
		type: Object,
		default: null,
	},
	isEncode: {
		type: Boolean,
		default: false,
	},
	highlightWord: {
		type: String,
		default: '',
	},
})

// 跳转详情页面
const onJumpDetail = () => {
	// 未认证客户禁止跳转详情页
	if (props.data.certified === 0) {
		return
	}
	bjsdk.goTo('/detail', {
		append: {
			custId: props.data.externalUserid,
		},
	})
}

// 跳转认证页面
const onJumpAuth = () =>
	bjsdk.goTo('/auth', {
		append: {
			custId: props.data.externalUserid,
		},
	})

const renderEncodePhone = (phone = '', isEncode) => {
	return isEncode ? phone.replace(/(^\d{3})\d{4}(\d{4}$)/, '$1****$2') : phone
}
</script>

<style lang="less" scoped>
.cust_card {
	padding: 30px;
	border-radius: 12px;
	background: #fff;
	.card_top {
		display: flex;
		.top_left {
			position: relative;
			width: 92px;
			height: 92px;
			.card_avatar {
				width: 92px;
				height: 92px;
				border-radius: 46px;
				overflow: hidden;
				--van-image-loading-icon-size: 92px;
				--van-image-error-icon-size: 92px;
			}
			.card_certified {
				position: absolute;
				left: 2px;
				top: 68px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 88px;
				height: 32px;
				border-radius: 16px;
				font-weight: 500;
				font-size: 19px;
				&.un_certified {
					background: #aab0bd;
					color: #fff;
				}
				&.has_certified {
					background: linear-gradient(
						166deg,
						#f6e6ce 0%,
						#f5d1b3 100%
					);
					color: #814223;
				}
			}
		}
		.top_middle {
			flex: 1;
			margin: 0 0 0 24px;
			.card_name {
				font-weight: 500;
				font-size: 32px;
				color: #333;
				line-height: 44px;
			}
			.card_phone {
				margin: 10px 0 0;
				font-size: 26px;
				color: #666;
				line-height: 36px;
				span + span {
					margin: 0 0 0 10px;
				}
			}
			.card_bank {
				margin: 10px 0 0;
				font-size: 22px;
				color: #999;
				line-height: 32px;
				span + span {
					&::before {
						content: ' | ';
					}
				}
			}
			.card_corp {
				margin: 10px 0 0;
				color: #48aa00;
				font-size: 22px;
				line-height: 32px;
				&::before {
					content: '@';
				}
				&.is_qw {
					color: #f57526;
				}
			}
		}
		.top_right {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 22px 0 0 20px;
			width: 122px;
			height: 56px;
			border-radius: 40px;
			background: #ed3636;
			color: #fff;
			font-size: 26px;
			font-weight: 500;
			cursor: pointer;
		}
	}
	.card_assets {
		display: flex;
		align-items: center;
		margin: 28px 0 0;
		.assets_label {
			width: 114px;
			font-weight: 500;
			font-size: 28px;
			line-height: 40px;
			color: #333;
		}
		.assets_value {
			font-weight: 500;
			font-size: 32px;
			line-height: 38px;
			color: #333;
		}
		.assets_unit {
			margin: 0 0 0 4px;
			font-style: normal;
			font-size: 24px;
			line-height: 34px;
			color: #999;
		}
	}
	.card_todo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 22px 0 0;
		height: 114px;
		padding: 0 24px;
		border-radius: 12px;
		background: #f9f9fa;
		.todo_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			i {
				color: #333;
				line-height: 48px;
				font-weight: 500;
				font-size: 34px;
			}
			span {
				margin: 2px 0 0;
				font-size: 22px;
				color: #999;
				line-height: 32px;
			}
		}
	}
}
</style>
